<template>
  <view class="table">
    <view class="headers warp">
     <!-- <wyb-table
        :headers="headers"
        :contents="[]"
        :header-bg-color="'#EDF4FA'"
        :first-col-bg-color="'#ffffff'"
        :min-height="[100]"
      /> -->
	  <view v-for="item,index in headers" :key="index" v-html="item"/>
    </view>
    <scroll-view scroll-y @scrolltolower="getData" enable-back-to-top>
		<view v-for="item,index in list" :key="index" class="list warp" :style="{background:index%2==1?'rgb(246,248,250)':'#fff'}">
			<view>
				{{item.testDate}}
			</view>
			<view :style="{
                color:item.isSbpAbnormal ? colors[item.sbpAbnormalLevel-1] : '',
              }">
				{{item.sbp}}
			</view>
			<view :style="{
                color: item.isDbpAbnormal ? colors[item.dbpAbnormalLevel-1] : '',
              }">
				{{item.dbp}}
			</view>
			<view>
				{{item.hr}}
			</view>
		</view>
        <view @click="again" class="bottom">
          {{ loadType == 1 ? "加载中..." : loadType == 2 ? "没有更多啦" : "加载失败，点击重试" }}
        </view>
    </scroll-view>
  </view>
</template>

<script>
import wybTable from "@/components/wyb-table/wyb-table.vue";
export default {
  name: "my-table",
  components: { wybTable },
  data() {
    return {
		colors:['#409EFF','rgb(253,154,1)','red'],//警告颜色
      date: null,
      patientId: "",
      headers: ['日期','收缩压(mmHg)','舒张压(mmHg)','脉搏<br/>(次/分)'],
	  list:[],
      pageNum: 1,
      loadType: 1, //1加载中，2没有更多，3错误
      loading: "",
    };
  },
  methods: {
    again() {
      if (this.loadType == 3) {
        this.getData();
      }
    },
    init(date, patientId) {
      this.date = date;
      this.patientId = patientId;
      this.pageNum = 1;
      this.loadType = 1;
      this.contents = [];
      this.getData();
    },
    getData() {
      if (this.loadType == 2 || this.loading) {
        return;
      }
      this.loading = true;
      this.$util.requestLodingType = false;
      this.$api
        .doctorBloodPressureTestList({
          pageNum: this.pageNum,
          pageSize: 20,
          patientId: this.patientId,
          startDate: this.date[0],
          endDate: this.date[1],
        })
        .then((res) => {
          this.loading = false;
          uni.stopPullDownRefresh();
          if (res.code == 200) {
            this.pageNum++;
            this.list=res.rows.map((item) => {
              if (new Date(item.testDate.replace(/-/g, "/")).getFullYear() == new Date().getFullYear()) {
                item.testDate = item.testDate.substring(5, 16);
              } else {
                item.testDate = item.testDate.substring(0, 16);
              }
              return item
            });
            if (this.list.length >= res.total) {
              this.loadType = 2;
            }
          } else {
            this.loadType = 3;
          }
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.table {
	.warp{
		view{
			display: flex;
			padding: 6rpx 0;
			flex-direction: column;
			justify-content: center;
			border-right:1rpx solid #e1e1e1;
		}
		view:first-child{
			width: 32vw;
		}
		view:nth-child(2){
			width: 24vw;
			
		}
		view:nth-child(3){
			width: 24vw;
			
		}
		view:last-child{
			width: 20vw;
		}
	}
  .headers {
    display: flex;
	border-top: 1rpx solid #e1e1e1;
	border-bottom: 1rpx solid #e1e1e1;
	text-align: center;
	background: rgb(237,245,248);
	font-weight: bold;
  }
  scroll-view {
    height: calc(100vh - 243rpx);
    .list {
		 display: flex;
		 border-bottom: 1rpx solid #e1e1e1;
		 text-align: center;
		 view{
			 height:80rpx;
		 }
    }
  }
  .bottom {
    text-align: center;
    line-height: 100rpx;
  }
}
</style>
